<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
	<xsl:param name="sortOrder">ascending</xsl:param>
	<xsl:param name="sortingField">Name</xsl:param>
	<xsl:param name="sortType">text</xsl:param>
<xsl:template match="/">
<html>
<head>
	<title>IT companies in the world</title>
    <link rel="stylesheet" href="slider/flexslider.css" type="text/css" />
    <link rel="stylesheet" href="slider/style.css" type="text/css" />
	<link rel="stylesheet" href="table.css" type="text/css" />
    <script src="slider/jquery-1.9.1.min.js"></script>
    <script src="slider/jquery.flexslider-min.js"></script>
	<script src="xml-functionality.js"></script>
	<script src="button-functionality.js"></script>
</head>
<body>    
    <div id="wrapper">
		<div class="header">
		<div class="header_text">IT companies in the world</div>
			<div class="shell">
				<div class="cl"></div>
				<div class="slider-holder">
					<span class="left"></span>
					<span class="right"></span>
					<div class="big-slider">
						<ul class="slides">
							<xsl:for-each select="CompaniesCatalog/Companies/Company">
								<li style="display:block">
								<img alt="" class="alignleft">
									<xsl:attribute name="src">
										<xsl:call-template name="template-image">
											<xsl:with-param name="CompanyId" select="ID" />
										</xsl:call-template>
									</xsl:attribute>
								</img>
								<div class="slide-cnt">
									<h2 class="company-title"><xsl:value-of select="Name"/></h2>
									<p class="hotel-info"><xsl:value-of select="Description"/></p>
									<a href="#" class="red-btn">
										<xsl:attribute name="data-id">
											<xsl:value-of select="ID"/>
										</xsl:attribute>
										Виж повече ...
									</a>
								</div>
								 </li>
							</xsl:for-each>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<div style="display:none;margin:80px 20px 0 20px;overflow:hidden;z-index:10000" id="container-companies">
            <table>
				<thead>
					<tr>
						<th>
							<a href="javascript:sortBy('Name')">Name:</a>
						</th>
						<th>
							<a href="javascript:sortBy('Founder')">Founder:</a>
						</th>
						<th>Industry:</th>
						<th>
							<a href="javascript:sortBy('Revenue')">Revenue (in billions):</a>
						</th>
						<th>
							<a href="javascript:sortBy('Employees')">Employees:</a>
						</th>
						<th>Address:</th>
						<th>Picture:</th>
						<th>Description:</th>
					</tr>
				</thead>
				<tbody>
					<xsl:call-template name="template-companies" />
				</tbody>
			</table>
        </div>
		
		<div id="footer-push"></div>
	</div>
	<div id="footer">
		<div class="shell">2014 XML course in FMI Authors: Stamo Gochev and Viktor Kostadinovski</div>
	</div>    
</body>
</html>
</xsl:template>

	
	<xsl:template name="template-companies">
		<xsl:for-each select="CompaniesCatalog/Companies/Company">
			<xsl:sort select="*[name(.)=$sortingField]" order="{$sortOrder}" data-type="{$sortType}"></xsl:sort>
			<tr>
				<td><xsl:value-of select="Name" /></td>
				<td><xsl:value-of select="Founder" /></td>
				<td>
					<xsl:value-of select="@Industry" />
				</td>
				<td><xsl:value-of select="Revenue" /></td>
				<td><xsl:value-of select="Employees" /></td>
				<td><xsl:value-of select="Address" />:</td>
				<td>
					<img alt="picture" width="90px" height="30px">
						<xsl:attribute name="src">
							<xsl:call-template name="template-image">
								<xsl:with-param name="CompanyId" select="ID" />
							</xsl:call-template>
						</xsl:attribute>
					</img>	
				</td>
				<td><xsl:value-of select="Description" /></td>
			</tr>
		</xsl:for-each>
	</xsl:template>

	<xsl:template name="template-image">
		<xsl:param name="CompanyId" />
		<xsl:param name="ImageId" select="//CompaniesAndImage/CompanyImage[@CompanyId=$CompanyId]/@ImageId" />
		<xsl:value-of select="//Images/Image[@id=$ImageId]/Src/text()" />
	</xsl:template>





</xsl:stylesheet>